// 基本信息
import { GatewayType } from "@/api/interface/iot";
import { uploadImg } from "@/api/modules/upload";
import DialogBox from "@/components/DialogBox";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
import UploadImg from "@/components/Upload/Img.vue";
import { SYSTEM_ID } from "@/config/config";
import { PublicStore } from "@/stores/modules/public";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		readonly: Boolean,
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const publicStore = PublicStore();
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			model: [{ required: true, message: proxy?.$t("product_detaildialog.form_rule_msg.model"), trigger: "change" }]
		});
		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		onMounted(() => {});
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					footerLabel={
						props.readonly
							? [proxy?.$t("product_detaildialog.footerlabel.close")]
							: [proxy?.$t("product_detaildialog.footerlabel.cancel"), proxy?.$t("product_detaildialog.footerlabel.confirm")]
					}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="flex">
						<div class="w-52 pr-4">
							<UploadImg
								v-model:imageUrl={props.detail.photo}
								emptyTips={proxy?.$t("product_detaildialog.uploadimg.tips")}
								width="100%"
								height="250px"
								api={uploadImg}
								disabled={props.readonly}
								headers={{
									Authentication: publicStore.token,
									systemid: SYSTEM_ID,
									timestamp: Date.now()
								}}
							></UploadImg>
						</div>
						<div class="flex-1">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px" disabled={props.readonly}>
								<el-form-item label={proxy?.$t("product_detaildialog.form_label.device")} prop="device">
									{/* <el-input v-model={props.detail.device} /> */}
									<el-radio-group v-model={props.detail.deviceType} disabled={!!props.detail.id}>
										<el-radio-button label={GatewayType.Device}>
											{proxy?.$t("product_detaildialog.radio_btn.device")}
										</el-radio-button>
										<el-radio-button label={GatewayType.SoftGateway}>
											{proxy?.$t("product_detaildialog.radio_btn.softgateway")}
										</el-radio-button>
										<el-radio-button label={GatewayType.Gateway}>
											{proxy?.$t("product_detaildialog.radio_btn.gateway")}
										</el-radio-button>
									</el-radio-group>
								</el-form-item>
								<el-form-item label={proxy?.$t("product_detaildialog.form_label.model")} prop="model">
									<el-input
										v-model={props.detail.model}
										disabled={props.detail.id ? true : false}
										placeholder={proxy?.$t("product_detaildialog.placeholder.model")}
									/>
								</el-form-item>
								<el-form-item label={proxy?.$t("product_detaildialog.form_label.name")} prop="name">
									<el-input v-model={props.detail.name} placeholder={proxy?.$t("product_detaildialog.placeholder.name")} />
								</el-form-item>
								<el-form-item label={proxy?.$t("product_detaildialog.form_label.deptId")} prop="deptId">
									<SelectDeptList
										detail={props.detail}
										initDefault={!props.detail.deptId}
										onChange={val => (props.detail.deptId = val.id)}
									/>
								</el-form-item>
								<el-form-item label={proxy?.$t("product_detaildialog.form_label.remark")} prop="remark">
									<el-input
										v-model={props.detail.description}
										placeholder={proxy?.$t("product_detaildialog.placeholder.remark")}
										type="textarea"
										auto-size
									/>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
